<!DOCTYPE html>
<html lang="zh">

  <head>
    <meta charset="utf-8">
    <title>我的课程</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <style type="text/css">
      body {
        background-color: #fff;
      }

      .list {
        padding: 15px 10px;

      }

      .list:first-child {
        /* margin-top: 15px; */
      }

      .list+.list {
        border-top: 1px solid #dcdcdc;
      }

      .tag-sm {
        padding: 2px 15px;
      }

      .bg-grey {
        background-color: #8799a3;
      }

      /* .title span{
        border-left: 3px solid #F29B76;
        padding-left: 4px;
      } */
      .list p {
        margin-bottom: 2px;
      }

      .label {
        border-left: 3px solid #DE722C;
        padding-left: 0.5rem;
      }

      .border-bottom {
        border-bottom: 1px solid #C1D9EF;
      }

      .btn {
        display: inline-block;
        padding: 0.2rem 1.2rem;
        font-size: 0.8rem;
        color: #1A4B82;
        border: 1px solid #1A4B82;
        border-radius: 3rem;
      }

      .Img {
        width: 8rem;
        height: 5rem;
        border: 1px solid #dcdcdc;
        padding: 3px;
        position: relative;
      }

      .Img img {
        width: 100%;
        height: 100%;
      }

      .courseLabel {
        position: absolute;
        background: rgba(0, 0, 0);
        width: 70px;
        text-align: center;
        font-size: 12px;
        color: #fff;
        border-radius: 20px;
        left: 50%;
        bottom: -8px;
        transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        /* IE 9 */
        -moz-transform: translate(-50%, 0);
        /* Firefox */
        -webkit-transform: translate(-50%, 0);
        /* Safari 和 Chrome */
        -o-transform: translate(-50%, 0);
        /* Opera */
      }

      .courseLabel img {
        width: 15px;
        height: 15px;
        margin-right: 2px;
      }
      .viewsIcon{
        width: 14px;
        height: 12px;
        /* vertical-align: middle; */
      }
      .text-cut-two{
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
      }
	  .hasLearned{
		  background:rgba(0, 0, 0,.5);color: #fff; position: absolute;right:4px;top:4px;padding:1px 2px;font-size: 12px;
	  }
    </style>
  </head>

  <body>
    <div id="container" class="container" v-cloak>
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">我的课程</h1>
		<a class="mui-icon mui-icon-right-nav mui-pull-right" @click="nextStep"
		href="javascript:;"><font size="3" color="#fff">下一步</font></a>
      </header>

      <div id="refreshContainer" class="mui-scroll-wrapper bg-white mui-content">
        <div class="mui-scroll">
          <div class="padding-lr">
            <div class="list flex" v-for="item in list" :key="item.id" @click="detail(item.id)">
              <div class="Img">
                <img :src="filePath+item.picId+'?token='+token" alt="">
                <div class="courseLabel flex align-center justify-center" v-if="item.type=='0'">
                  <img src="../img/icon1.png" alt="">
                  <span>必修课</span>
                </div>
                <div class="courseLabel flex align-center justify-center" v-if="item.type=='1'">
                  <img src="../img/icon2.png" alt="" style="width: 14px;height: 14px;">
                  <span>选修课</span>
                </div>
				<div v-if="item.status" class="hasLearned">已观看</div>
              </div>
              <div class="padding-left text-cut flex-sub">
                <div class="text-df text-cut">{{item.name}}</div>
                <p class="text-sm padding-top-xs text-grey text-cut">{{item.remarks}}</p>
                <div class="flex justify-between text-sm text-grey padding-top-sm">
                  <div>{{item.createTime}}</div>
                  <div> <!-- <img src="../img/views.png" alt="" class="viewsIcon"> {{item.views}} --></div>
                </div>
              </div>
            </div>
			<div class="padding text-center" v-if="list.length===0">
			  <p>暂无数据</p>
			</div>
			
          </div>
        </div>
      </div>

    </div>
    </div>
    <script src="../../../js/mui.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script src="../formal/js/api.js"></script>
    <script type="text/javascript">
      var htapi = new HTGlobal();
      var user = JSON.parse(localStorage.getItem('outUser'));
      var myCourse = null;
      var size = 15;
      var page = 0;
	  
	  

      mui.init({
        pullRefresh: {
          container: "#refreshContainer", //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
          down: { //下拉刷新
            style: 'circle',
            height: 50, //可选,默认50.触发下拉刷新拖动距离,
            auto: false, //可选,默认false.首次加载自动下拉刷新一次
            contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
            contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
            contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
            callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
              page = 0;
              load(page);
              ////没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
              mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
              // countDown++;
            }
          },
          up: { //上拉加载
            height: 50, //可选.默认50.触发上拉加载拖动距离
            auto: false, //可选,默认false.自动上拉加载一次
            contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
            contentnomore: "", //可选，请求完毕若没有更多数据时显示的提醒内容；
            callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
              /*每次加载动态的添加一个li*/
              // $("#testUl").append($("<li>" + new Date() + "</li>"));
              this.endPullupToRefresh(false)
              page++;
              load(page);
            }
          }
        }
      });
      mui.plusReady(function() {
        load(page);
      })
      myCourse = new Vue({
        el: '#container',
        data: {
          list: [],
		  filePath:'',//预览路径
		  token:''
        },
        methods:{
          detail(id){
            mui.openWindow({
              url: './courseDetail.html',
              id: './courseDetail.html',
              extras: {
                pageId: id
              }
            });
          },
		  nextStep(){
			  //前往下一步操作
			  var action = function(){
				  mui.openWindow({
					url: './courseNew.html',
					id: '../course/courseNew.html',
					extras: {},
					waiting: {
					  autoShow: false
					}
				 });
			 }
			 htapi.getStatus(action)
		  }
        },
		created(){
			this.filePath = htapi.filePath;
			this.token = localStorage.getItem('token');
		}
      })
      //页面加载
      function load(page) {
        htapi.fetch({
          userId: user.id,
          projectId: user.currentProjectId,
          // projectId: '151',
          page: page,
          size: size
        }, function(data) {
          if (page == 0) {
            myCourse.list = []
          }
		  if(data.code!='0' && data.msg){
			  mui.toast(data.msg);
			  return;
		  }
          myCourse.list = myCourse.list.concat(data.data.list||[])
          console.log(JSON.stringify(data))
          //如果每次获取数据小于10条,或未获取成功则显示没有更多了.
          if (data.data.list.length < size) { //
            mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
            mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
            return;
          } else {
            mui('#refreshContainer').pullRefresh().endPullupToRefresh(false); //参数为true代表没有更多数据了。
            mui('#refreshContainer').pullRefresh().enablePullupToRefresh(); //启用上拉加载
          }
        }, '加载中', 'myCourse')

      }
	  //重置列表观看课程状态
	  window.addEventListener('coursereload',function(){
		  page = 0
		  load(page)
	  })
    </script>
  </body>

</html>
